<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<%@include file="includes/Imports.jsp"%>
<title>${webinfo_title} - ${gallery.galleryTitle}</title>

<script type="text/javascript">

	$(document).ready(function() {
		$('.gallery_image_thumb').click(
				function() {
					
					var posting = $.post("${url_gallery_popup}/"+ $(this).attr('src'), {});

					posting.done(function(data) {
						modal.open({content: data});
					}, 'html')
					
					.fail(function(jqx, err, ex) {
						alert(err + ' ' + ex);
					});

				});
	});

	var modal = (function() {
		var method = {}, $overlay, $modal, $content;

		$overlay = $('<div id="overlay"></div>');
		$modal = $('<div id="modal"></div>');
		$content = $('<div id="content"></div>');

		$modal.hide();
		$overlay.hide();
		$modal.append($content);

		$(document).ready(function() {
			$('body').append($overlay, $modal);
		});

		// Center the modal in the viewport
		method.center = function() {
			var top, left;

			top = Math.max($(window).height() - $modal.outerHeight(), 0) / 2;
			left = Math.max($(window).width() - $modal.outerWidth(), 0) / 2;

			$modal.css({
				top : top + $(window).scrollTop(),
				left : left + $(window).scrollLeft()
			});
		};
		
		// Open the modal
		method.open = function(settings) {
			$content.empty().append(settings.content);
			
// 			var imgWidth = 'auto';
// 			var maxWidth = (0.70*$(window).width());
			
// 			if($modal.outerWidth()>maxWidth){
// 				imgWidth = maxWidth;
// 			}
			
		    $modal.css({
// 		    	width : imgWidth
		        width: settings.width || 'auto', 
		        height: settings.height || 'auto'
		    });

		    method.center();

		    $(window).bind('resize.modal', method.center);

		    $modal.show();
		    $overlay.show();
		};

		// Close the modal
		method.close = function() {
			$modal.hide();
		    $overlay.hide();
		    $content.empty();
		    $(window).unbind('resize.modal');
		};

		$overlay.click(function(){
			method.close();
		});		

		return method;
		
	}());
</script>

</head>
<body>

	<!-- HEADER -->
	<div class="header_div cdf">
		<c:import url="${url_header }"></c:import>
	</div>
	<!-- END HEADER -->

	<!-- CONTENT -->
	<div class="gallery_div cdf">
		<div class="gallery_title_div cdf">${gallery.galleryTitle}</div>
		<div class="gallery_author_div cdf">${gallery.galleryAuthor}</div>
		<div class="gallery_description_div cdf">${gallery.galleryDescription}</div>
		<div class="gallery_image_thumbs_div cdf">
			<c:forEach items="${gallery.galleryImages}" var="image">
				<img src="${gallery.galleryUrl }/${image.galleryImageUrl}" alt=""
					class="gallery_image_thumb" id="galleryImage" />
			</c:forEach>
		</div>
		<div class="gallery_date_div cdf">
			Last modified on:
			<fmt:formatDate value="${gallery.galleryDate}"
				pattern="MMMM dd, yyyy HH:mm:ss" />
		</div>
	</div>
	<!-- END CONTENT -->

	<!-- FOOTER -->
	<div class="footer_div cdf">
		<c:import url="${url_footer }"></c:import>
	</div>
	<!-- END FOOTER -->

</body>
</html>